<template>
  <div id="app">
    <el-container >
      <el-header v-if="isLogin"><DqHeader/></el-header>
      <el-container>
        <el-aside width="200px" v-if="isLogin">
          <NavMenu />
        </el-aside>
        <el-main style="padding: 0 20px 20px 20px">
            <router-view/>
        </el-main>
      </el-container>
    </el-container>
  	<!--<NavMenu v-if="isLogin"></NavMenu>
    <el-row>
      <el-col :span="4">
      </el-col>
      <el-col :span="20">
        <div class="content-wrapper">
          <router-view/>
        </div>
      </el-col>
    </el-row>-->
  </div>
</template>

<script>

import DqHeader from './components/common/DqHeader'

import Api from './api/Api'
import NavMenu from "~/components/common/NavMenu";



export default {
  components: {
    NavMenu,
    DqHeader
  },
  data(){
    return {
      
    }     
  },
  computed: {
    isLogin(){
      return Api.isLogin();
    }
  }
}
</script>

<style>
  html, body{background: #f6f6f6; font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
  }


  .theme-color, .color-theme{color: #409EFF;}
  .theme-bg-color, .bg-color-theme{background-color: #409EFF;}

  .color-black-first{
    color: #303133;
  }
  .color-black-second{
    color: #606266;
  }
  .color-black-third{
    color: #777;
  }
  .color-black-table-th{
    color: #909399;
  }
  .color-danger{
    color: #F56C6C; 
  }
  .color-success{
    color: #67C23A;
  }
  .color-warning{
    color: #E6A23C;
  }

  .app-section-bg{background-color: #f4f4f4;}
  .app-section{background-color: #f4f4f4; padding: 1em;}
  .app-section .section-img-200{width: 150px; display: inline-block; margin: 10px 10px 0 0;}
  .app-section .section-img-wh-200{width: 150px;height: 150px; display: inline-block; margin: 10px 10px 0 0;}
  .app-section .section-img-80{width: 80px; display: inline-block; margin: 10px 10px 0 0;}
  .app-h3{font-weight: 400; color: #303133;}
  .app-h4{font-weight: 400; color: #303133;}
  .app-label{font-size: 14px; color: #606266; line-height: 1.5em; display: inline-block; margin: 10px auto;}
  .app-text{font-size: 14px; color: #303133; line-height: 1.5em; display: inline-block; margin: 10px auto;}

  .app-ibtn-black{
    font-size: 24px;
    color: #999;
    padding: 0;
  }
    
  .font-size-small{font-size: 12px;}
  .font-size-text{font-size: 14px;}
  .font-size-h6{font-size: 16px;}

  .text-bold{font-weight: bold;}

  .text-center{text-align: center;}
  .text-left{text-align: left;}
  .text-right{text-align: right;}
  .text-align-top{vertical-align: top;}

  .content-wrapper{
    margin-top: 60px;
    padding: 0 70px;
  }


  .chain-link-bar-wrapper{
    display: block; 
    padding: 15px 0;
  }

  .pager-bar-wrapper{
    margin-top: 15px;
    margin-left: -10px
  }

  .el-card__body{padding-top: 0;}
  .el-card__header{border-bottom: none;}

  .el-pager li{font-weight: 400;}



  .app-display-inline{display: inline-block;}

  .app-icon-s18{font-size: 18px;}

  .app-margin-v-0{margin-top: 0; margin-bottom: 0;}
  .app-margin-b-0{margin-bottom: 0;}
  .app-margin-v-5{margin-top: 5px; margin-bottom: 5px;}
  .app-margin-v-15{margin-top: 15px; margin-bottom: 15px;}
  .app-margin-v-20{margin-top: 20px; margin-bottom: 20px;}
  .app-margin-h-15{margin-left: 15px; margin-right: 15px;}
  .app-margin-h-20{margin-left: 20px; margin-right: 20px;}
  .app-margin-l-10{margin-left: 10px;}
  .app-margin-r-10{margin-right: 10px;}
  .app-margin-l-20{margin-left: 20px;}
  .app-margin-r-20{margin-right: 20px;}
  .app-margin-r-40{margin-right: 40px;}
  .app-diliver, .app-diliver-15{display: block; border: none;}
  .app-diliver{height: 20px;}
  .app-diliver-15{height: 15px;}
  .app-diliver-10{height: 10px;}

  .app-margin-0{margin: 0 !important}

  .app-border-none{border: none !important;}

  .app-tabs-wrapper .app-tab{cursor: pointer;}

  .app-pull-right{float: right;}

  .app-list-head-img{width: 60px; height: 60px;}

  .app-margin-top60{margin-top: 60px;}

  .app-el-icon-size{font-size: 20px;}

  .table-black-header tr th{background: #f5f7fa;}


  .nc-table .nc-header-bg{background: #f5f7fa;}
  .nc-table, .nc-table tr th, .nc-table tr td {
    border: 1px solid #ebeef5;
  }
  .nc-table tr th, .nc-table tr td{padding: 15px 15px; font-size: 14px; color: #606266;}
  .nc-table{border-collapse: collapse; width: 100%;}

  .auto-width-date-picker{width: auto !important;}

  .el-form-item .width-per100{width: 100%;}

  .wrapper-input-width-200 .el-input{width: 200px;}
  .wrapper-input-width-400 .el-input, .wrapper-input-width-400 .el-textarea{width: 400px;}

  .nc-table-btn-ctrl .cell .el-button{margin: 5px 10px 5px 0 !important;}
  .nc-table-line-height-20{line-height: 20px;}

  


  /**黄色边框表格**/
  .el-table-warning{
    border-top: 1px solid #f5dab1;
    border-left: 1px solid #f5dab1;
    border-collapse: collapse;
    
  }
  .el-table-warning td, .el-table-warning th.is-leaf{
    border-bottom: 1px solid #f5dab1;
  }
  .el-table-warning td, .el-table-warning th, .el-table-warning .el-table__body-wrapper .el-table-warning.is-scrolling-left~.el-table__fixed{
    border-right: 1px solid #f5dab1 !important;
  }
  .el-table-warning::after, .el-table-warning::before{
    background-color: #f5dab1 !important;
  }

  /**蓝色边框表格**/
  .el-table-primary{
    border-top: 1px solid #b3d8ff;
    border-left: 1px solid #b3d8ff;
    border-collapse: collapse;
    
  }
  .el-table-primary td, .el-table-primary th.is-leaf{
    border-bottom: 1px solid #b3d8ff;
  }
  .el-table-primary td, .el-table-primary th, .el-table-primary .el-table__body-wrapper .el-table-primary.is-scrolling-left~.el-table__fixed{
    border-right: 1px solid #b3d8ff !important;
  }
  .el-table-primary::after, .el-table-primary::before{
    background-color: #b3d8ff !important;
  }

  /**绿色边框表格**/
  .el-table-success{
    border-top: 1px solid #c2e7b0;
    border-left: 1px solid #c2e7b0;
    border-collapse: collapse;
    
  }
  .el-table-success td, .el-table-success th.is-leaf{
    border-bottom: 1px solid #c2e7b0;
  }
  .el-table-success td, .el-table-success th, .el-table-success .el-table__body-wrapper .el-table-success.is-scrolling-left~.el-table__fixed{
    border-right: 1px solid #c2e7b0 !important;
  }
  .el-table-success::after, .el-table-success::before{
    background-color: #c2e7b0 !important;
  }
  
  /**自定义 disable radio 样式**/
  .nc-disable-radio-wrapper .el-radio__input.is-disabled.is-checked .el-radio__inner{
    background-color: #a4a7ad;
    border-color: #94979d;
  }
  .nc-disable-radio-wrapper .el-radio__input.is-disabled.is-checked .el-radio__inner::after{
    background-color: #fff;
  }
  .nc-disable-radio-wrapper .el-radio__input.is-disabled+span.el-radio__label{
    color: #909296;
  }
  .nc-disable-radio-wrapper .el-radio__input.is-disabled.is-checked+span.el-radio__label{
    color: #808286;
    font-weight: bolder;
  }

  /**自定义 disable checkbox 样式**/
  .nc-disable-radio-wrapper .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{
    border-color: #94979d;
  }
  .nc-disable-radio-wrapper .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after{
    border-color: #444;
  }
  .nc-disable-radio-wrapper .el-checkbox__input.is-disabled+span.el-checkbox__label{
    color: #909296;
  }
  .nc-disable-radio-wrapper .el-checkbox__input.is-disabled.is-checked+span.el-checkbox__label{
    color: #808286;
    font-weight: bolder;
  }
  

  /**表格行内编辑**/
  .nc-table-edit-input-wrapper .el-input, .nc-table-edit-input-wrapper .el-textarea{margin: 22px 0 0 0;}


  /**设置checkbox 换行左对齐**/
  .app-checkbox-align-left .el-checkbox{
    margin-left: 0;
    margin-right: 30px;
  }

  /**设置radio 换行左对齐**/
  .app-radio-align-left .el-radio{
    margin-left: 0;
    margin-right: 30px;
  }

  /**disabled input 显示清晰**/
  .disabled-input-wrapper .el-input.is-disabled .el-input__inner{
    color: #606266;
  }

  /**服务单模块**/
  .mbaefp-title-second{
    display: block; margin-top: 10px; font-weight: 400; font-size: 16px; 
  }

  /**大转盘**/
  .laeid-radio-icon{
    width: 35px;
    height: 35px;
    vertical-align: middle;
  }

  /**服务单编辑**/
  .mbpi-item-block{
    display: inline-block;
    margin: 0 5em 0 0;
  }
  .mbpi-cell-text{
    line-height: 26px;
  }
  .mbpi-cell-requirement{min-height: 80px;}
  

  .trend-view-chart{width: 100%; height: 500px; margin: 25px 0 50px 0;}
</style>
